<script setup>
    import { ref, reactive } from 'vue';

    let user = reactive({
        username:"",
        userpwd:"",
        hobbies:[],
        gender:"",
        province:"",
        introduce:""
    })

    function resetForm(){
        user.username = ''
        user.userpwd = ''
        user.hobbies = ''
        user.gender = ''
        user.province = ''
        user.introduce = ''
    }

    function alertmsg() {
        alert(JSON.stringify(user));
    }
</script>

<template>
    <div>
        姓名：<input type="text" v-model="user.username" /> <br>
        密码：<input type="password" v-model="user.userpwd" /> <br>
        爱好：唱<input type="checkbox" v-model="user.hobbies" value="sing"/> 跳<input type="checkbox" v-model="user.hobbies" value="dance"/> rap<input type="checkbox" v-model="user.hobbies" value="rap"/><br>
        性别：男<input type="radio" v-model="user.gender" value="1"/> 女<input type="radio" v-model="user.gender" value="0"/> <br>
        籍贯：<select v-model="user.province">
                <option value="1">京</option>
                <option value="2">津</option>
                <option value="3">冀</option><br>
            </select>
        简介：<textarea v-model="user.introduce"></textarea><br>
        {{user}}<br>
        <button @click="resetForm()">一键清空表单</button>
    </div>
    
</template>
  

<style scoped>

</style>
